<template>
  <view class="login-form">
    <view class="login-title">欢迎成为盒子IM的用户</view>
    <uni-forms ref="registerForm" style="margin-top: 100px" :modelValue="registerForm" :rules="rules" validate-trigger="bind" label-align="right" label-width="70px">
      <!-- <uni-forms :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="80px" class="web-ruleForm"> -->
      <uni-forms-item label="用户名" name="userName">
        <uni-easyinput type="userName" v-model="registerForm.userName" focus placeholder="用户名(登录使用)" clearable />
      </uni-forms-item>
      <uni-forms-item label="昵称" name="nickName">
        <uni-easyinput type="nickName" v-model="registerForm.nickName" placeholder="昵称" clearable />
      </uni-forms-item>
      <uni-forms-item label="密码" name="password">
        <uni-easyinput type="password" v-model="registerForm.password" :passwordIcon="false" placeholder="密码" clearable />
      </uni-forms-item>
      <uni-forms-item label="确认密码" name="confirmPassword">
        <uni-easyinput type="password" v-model="registerForm.confirmPassword" :passwordIcon="false" placeholder="确认密码" clearable />
      </uni-forms-item>
    </uni-forms>
  </view>
  <button class="submit-button" type="primary" @click="register()">注册</button>
  <button class="submit-button" @click="jumpToLogin()" type="info">已有账号，立即登录</button>
</template>

<script lang="ts">
import { IRegisterForm, loginApi } from '../../api/login'

export default {
  name: 'register',
  data() {
    return {
      registerForm: {
        userName: '',
        nickName: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        userName: {
          rules: [{ required: true, errorMessage: '请输入用户名' }]
        },
        nickName: {
          rules: [{ required: true, errorMessage: '请输入昵称' }]
        },
        password: {
          rules: [
            { required: true, errorMessage: '请输入密码' },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value !== data.confirmPassword) {
                  callback('两次密码输入不一致！')
                  return false
                }
                return true
              }
            }
          ]
        },
        confirmPassword: {
          rules: [
            { required: true, errorMessage: '请输入密码' },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value !== data.password) {
                  callback('两次密码输入不一致！')
                  return false
                }
                return true
              }
            }
          ]
        }
      }
    }
  },
  methods: {
    jumpToLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    register() {
      const registerForm = this.$refs.registerForm as any
      registerForm.validate().then((form: IRegisterForm) => {
        loginApi.register(form).then(() => {
          uni.showToast({ title: '注册成功！' })
          uni.setStorageSync('userName', form.userName)
          uni.setStorageSync('password', form.password)
          this.jumpToLogin()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-form {
  margin: 50rpx;

  .login-title {
    margin-top: 100rpx;
    margin-bottom: 100rpx;
    color: royalblue;
    text-align: center;
    font-size: 60rpx;
    font-weight: 600;
  }
}

.submit-button {
  margin: 100rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
</style>
